<!DOCTYPE html>
<html>
<head>

	<meta http-equiv="Content-type" content="text/html; charset=utf-8">

	<title>_KeyNavContainer robot test</title>

	<script type="text/javascript" src="../../../dojo/dojo.js"
			data-dojo-config="isDebug: true, async: true"></script>

	<script type="text/javascript">
		require([
			"doh/runner", "dojo/robotx", "dojo/dom", "dojo/keys"
		], function(doh, robot, dom, keys){

			robot.initRobot('../test_KeyNavContainer.html');

			doh.register(function setup(){
				// get pointer to registry in the iframe
				registry = robot.window.require("dijit/registry");
				dfocus = robot.window.require("dijit/focus");
			});

			doh.register("keyboard", [
				{
					name: "multi char search with spaces",
					timeout: 5000,
					runTest: function(){
						var d = new doh.Deferred();

						var c = registry.byId("keyboard");
						c.set("multiCharSearchDuration", 100);

						// Tab in
						robot.sequence(d.getTestErrback(function(){
							dom.byId("input").focus();
						}), 100);
						robot.keyPress(keys.TAB, 100, {});
						robot.sequence(d.getTestErrback(function(){
							doh.is("Alabama", dfocus.curNode.innerHTML);
						}), 100);

						// Type multi-character string with a space; make sure we navigate to the right item
						robot.typeKeys("new m", 100);
						robot.sequence(d.getTestErrback(function(){
							doh.is("New Mexico", dfocus.curNode.innerHTML);
							doh.is(0, dom.byId("clicks").innerHTML, "no keyboard click events")
						}), 100);

						// Now that 100ms have elapsed, the search should be canceled, and each space typed
						// should generate an a11y click event
						robot.keyPress(keys.SPACE, 10, {});
						robot.keyPress(keys.SPACE, 10, {});
						robot.keyPress(keys.SPACE, 10, {});
						robot.sequence(d.getTestErrback(function(){
							doh.is(3, dom.byId("clicks").innerHTML, "three keyboard click events");
						}), 100);

						// And make sure that we can search to somewhere else
						robot.typeKeys("n", 100);
						robot.sequence(d.getTestCallback(function(){
							doh.is("New York", dfocus.curNode.innerHTML);
						}), 100);

						return d;
					}
				}
			]);
			doh.run();
		});

	</script>
</head>
<body class="claro">

	<label for="input">before:</label><input id="input"/>
	<div id="container" data-dojo-type="TestContainer">
		<!-- comment just to make sure that numbering isn't thrown off -->
		<div id="zero" data-dojo-type="TestContained">zero</div>
		<div id="one" data-dojo-type="TestContained">one</div>
		<div id="two" data-dojo-type="TestContained">two</div>
		<div id="three" data-dojo-type="TestContained">three</div>
	</div>

	<div id="keyboard" data-dojo-type="TestContainer">
		<div data-dojo-type="TestContained" value="AL">Alabama</div>
		<div data-dojo-type="TestContained" value="AK">Alaska</div>
		<div data-dojo-type="TestContained" value="AZ">Arizona</div>
		<div data-dojo-type="TestContained" value="AR">Arkansas</div>
		<div data-dojo-type="TestContained" value="CA">California</div>
		<div data-dojo-type="TestContained" value="NH">New Hampshire</div>
		<div data-dojo-type="TestContained" value="NJ">New Jersey</div>
		<div data-dojo-type="TestContained" value="NM">New Mexico</div>
		<div data-dojo-type="TestContained" value="NY">New York</div>
	</div>

</body>
</html>
